<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>日常管理</el-breadcrumb-item>
      <el-breadcrumb-item>伙食管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>充值信息汇总</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 搜索框 -->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="账户名称：" prop="accountName">
        <el-input v-model="searchFormModel.accountName" placeholder="请输入账户名称" clearable />
      </el-form-item>
      <el-form-item label="充值日期：" prop="payDt"  >
        <el-date-picker
            v-model="searchFormModel.payDt"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchOnSubmit">
          <el-icon><Search /></el-icon>  查询
        </el-button>
        <el-button type="primary" @click="exportData">
          <el-icon><Search /></el-icon>  导出
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  表格-->
  <div style="margin:20px">
    <el-table :data="payInfo" stripe border style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="序号" v-if="false"/>
      <el-table-column prop="userNumber" label="用户编号"/>
      <el-table-column prop="accountName" label="账户名称"/>
      <el-table-column prop="accountNumber" label="账户账号"  />
      <el-table-column prop="payMoney" label="充值金额"  />
      <el-table-column prop="payDt" label="充值日期" />
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,8]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>

import {ArrowRight, Delete, Edit, Search} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/daily";
onMounted(()=>{
  getPayInfo();
})
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const payInfo=ref([]);
//搜索框
const searchFormRef=ref();
const searchFormModel=reactive({
  accountName:'',
  payDt:[]
})
const  getPayInfo=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含其他参数
  };
  if (searchFormModel.accountName && searchFormModel.accountName.trim() !== ''){
    params.accountName=searchFormModel.accountName.trim();
  }
  if (searchFormModel.payDt && searchFormModel.payDt.length === 2) {
      const date=new Date(searchFormModel.payDt[0]);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const formattedDate =  `${year}-${month}-${day}`;
      params.startDate = formattedDate;

    const date1=new Date(searchFormModel.payDt[1]);
    const year1 = date1.getFullYear();
    const month1 = (date1.getMonth() + 1).toString().padStart(2, '0');
    const day1= date1.getDate().toString().padStart(2, '0');
    const formattedDate2 =  `${year1}-${month1}-${day1}`;
    params.endDate =formattedDate2 ;
  }
  request({
    url:'/payTotal/getPayTotal',
    method:'get',
    params,
  }).then((req)=>{
    if (200==req.data.errorCode){
      payInfo.value=req.data.data.records;
      totals.value=req.data.data.total;
    }
  })
}
const searchOnSubmit=()=>{
  getPayInfo();
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getPayInfo();
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getPayInfo();
}


/// 导出
const selectedRows=ref([])
const handleSelectionChange=(rows)=>{
  selectedRows.value = rows;
}
//批量导出
const exportData=()=>{
  let exportUrl = 'http://localhost:9094/payTotal/export?';

  if (! selectedRows.value.length ){
    //没有选择的时候，全部导出 或者搜索框条件为空
    if (searchFormModel.accountName && searchFormModel.accountName.trim() !== '') {
      exportUrl += `accountName=${encodeURIComponent(searchFormModel.accountName.trim())}`;
    }

    if (searchFormModel.payDt && searchFormModel.payDt.length === 2) {
      const startDate = new Date(searchFormModel.payDt[0]);
      const endDate = new Date(searchFormModel.payDt[1]);

      const formattedStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
      const formattedEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;

      exportUrl += `&startDate=${encodeURIComponent(formattedStartDate)}&endDate=${encodeURIComponent(formattedEndDate)}`;
    }

    window.open(exportUrl);

  }else{ //[1，2，3]-》1，2，3
    let idsStr = selectedRows.value.map(row => row.id).join(",");
    window.open(exportUrl+"id="+idsStr);
  }
}
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
</style>